<script>
import {defineComponent} from 'vue'
import {delJAn, getJAn} from "@/api/api";

export default defineComponent({
    name: "removeJiaoAn",
    data() {
        return {
            tableData: [
            ],
            selectedRows:[],
            localremoveJiaoAn:false
        }
    },
    methods:{
        handleSelectionChange(val){
            if (val){
                this.selectedRows=[]
                val.forEach(item=>{
                    this.selectedRows.push(item.id)
                })
            }
            console.log(this.selectedRows)
        },
        async delAll() {
            if (!this.selectedRows.length) {
                this.$message.warning('请先选择要删除的项');
                return;
            }

            try {
                const promises = this.selectedRows.map(id => delJAn({ id }));
                const results = await Promise.allSettled(promises);
                const successCount = results.filter(result => result.status === 'fulfilled' && result.value?.data?.code === 200).length;
                const errorCount = results.length - successCount;

                if (successCount === results.length) {
                    this.$message.success('全部删除成功');
                } else if (errorCount === results.length) {
                    this.$message.error('全部删除失败，请检查网络设置');
                } else {
                    this.$message.info(`部分删除成功，成功 ${successCount} 项，失败 ${errorCount} 项`);
                }
                await this.getJAList();
                this.selectedRows=[];
            } catch (error) {
                this.$message.error(`删除时发生错误：${error.message}`);
            }
        },
        close(){
            this.$emit('DialogClose')
        },
        async getJAList(){
            const res= await getJAn();
            if (res.data.code===200){
                this.tableData=res.data.data
            }else{
                this.$message.error('获取教案失败,请检查网络设置')
            }
        },
    },
    props:{
        removeJiaoAn:{
            type:Boolean,
            default:false
        }
    },
    watch: {
        // 监听父组件的 prop 变化并同步到本地副本
        removeJiaoAn(newVal) {
            this.localremoveJiaoAn = newVal;
            if (newVal){
                this.getJAList()
            }
        }
    },

})
</script>

<template>
            <el-dialog title="删除教案" :visible.sync="localremoveJiaoAn" width="59rem" @close="close" custom-class="switchPatrolDialog"  >
                <div>
                    <el-table :data="tableData" v-model="selectedRows" @selection-change="handleSelectionChange"  height="250">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column label="ID" width="80" prop="id" align="center" header-align="center" >
                        </el-table-column>
                        <el-table-column label="教案名称" width="180" prop="name" align="center" header-align="center">
                        </el-table-column>
                        <el-table-column label="工况文件" width="180" prop="gkName" align="center" header-align="center">
                        </el-table-column>
                        <el-table-column label="教案描述" width="398" prop="teaDesc" align="center" header-align="center">
                        </el-table-column>
                    </el-table>
                </div>
                <div class="btns">
                    <el-button @click="close" style="margin-left: auto">取消</el-button>
                    <el-button type="primary" @click="delAll">确定</el-button>
                </div>

            </el-dialog>
</template>

<style scoped lang="less">
.el-button{
    color: #ebeff0;
    background: linear-gradient(#176575,#07283f);
    border:0;
    box-shadow: 0 -2px 0 rgba(16, 164, 195, .8);
    width: 8rem;
}

:deep(.el-input__inner) {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}
:deep(.is-disabled .el-input__inner){
    background-color: #131f2a;
    border-color: rgba(255, 255, 255, 0.2);
    color: #999;
}
.eventList{
    margin-top: 1rem;
    background-color: transparent !important;
    height: 15rem;
    overflow: hidden;
    border-bottom: 1px solid #999;
}


/* 自定义 el-table 列单元格背景为透明 */
/deep/ .el-table .el-table__body tr {
    background-color: transparent !important; /* 设置行的背景为透明 */
}


/* 修改单元格边框颜色为透明 */
/deep/ .el-table th, .el-table td {
    border-color: #999 !important;
}
/deep/ .el-table th.el-table__cell{
    background-color: rgb(2, 22, 42) !important;
    color: #fff !important;
    font-weight: 700;
}
.btns{
    margin-top: 1rem;
    display: flex;
}
</style>
